<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">进度条-> 文档请参考：
          <a href="http://www.layui.com/doc/element/progress.html" target="_blank">
            <span>http://www.layui.com/doc/element/progress.html</span>
          </a>
        </div>
        <div class="layui-card-body">

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>默认风格的进度条</legend>
          </fieldset>

          <div class="layui-progress">
            <div class="layui-progress-bar" lay-percent="40%"></div>
          </div>
          <div style="margin-top: 15px; width:300px">
            <div class="layui-progress">
              <div class="layui-progress-bar" lay-percent="70%"></div>
            </div>
          </div>

          <br> 温馨提示：进度条的宽度是100%适配于它的父级元素，如上面的进度条是在一个300px的父容器中。

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>更多颜色选取</legend>
          </fieldset>

          <div class="layui-progress">
            <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
          </div>

          <br>

          <div class="layui-progress">
            <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
          </div>

          <br>

          <div class="layui-progress">
            <div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
          </div>

          <br>

          <div class="layui-progress">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
          </div>

          <br>

          <div class="layui-progress">
            <div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
          </div>

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>大尺寸进度条</legend>
          </fieldset>
          <div class="layui-progress layui-progress-big">
            <div class="layui-progress-bar" lay-percent="20%"></div>
          </div>

          <br>
          <div class="layui-progress layui-progress-big">
            <div class="layui-progress-bar layui-bg-green" lay-percent="35%"></div>
          </div>
          <br>
          <div class="layui-progress layui-progress-big">
            <div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></div>
          </div>

          <fieldset class="layui-elem-field layui-field-title" style="margin: 50px 0 30px;">
            <legend>显示进度比文本</legend>
          </fieldset>
          <div class="layui-progress" lay-showpercent="true">
            <div class="layui-progress-bar" lay-percent="20%"></div>
          </div>

          <br>

          <div class="layui-progress" lay-showpercent="true">
            <div class="layui-progress-bar" lay-percent="5 / 10"></div>
          </div>

          <br>

          <div class="layui-progress layui-progress-big" lay-showpercent="true">
            <div class="layui-progress-bar" lay-percent="70%"></div>
          </div>

          <br> 正如你上述看到的，除了百分数，还支持分数（layui 2.1.7 新增）

          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>动态改变进度</legend>
          </fieldset>

          <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo_hash">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
          </div>

          <div class="site-demo_hash-button" style="margin-top: 20px; margin-bottom: 0;">
            <button class="layui-btn site-demo_hash-active" data-type="setPercent">设置50%</button>
            <button class="layui-btn site-demo_hash-active" data-type="loading">模拟loading</button>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>


<script>
  layui.use('element', function() {
    var $ = layui.jquery,
      element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

      element.init();
    //触发事件
    var active = {
      setPercent: function() {
        //设置50%进度
        element.progress('demo_hash', '50%')
      },
      loading: function(othis) {
        var DISABLED = 'layui-btn-disabled';
        if (othis.hasClass(DISABLED)) return;

        //模拟loading
        var n = 0,
          timer = setInterval(function() {
            n = n + Math.random() * 10 | 0;
            if (n > 100) {
              n = 100;
              clearInterval(timer);
              othis.removeClass(DISABLED);
            }
            element.progress('demo_hash', n + '%');
          }, 300 + Math.random() * 1000);

        othis.addClass(DISABLED);
      }
    };

    $('.site-demo_hash-active').on('click', function() {
      var othis = $(this),
        type = $(this).data('type');
      active[type] ? active[type].call(this, othis) : '';
    });
  });
</script>

<style scoped>

</style>